<template>
	<div class="equation-top-item-content">
		<div class="equation-top-item-bg" style="opacity: 1; width: 640px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\alpha" data-type="greece" data-poupe="" data-key="">α</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\beta" data-type="greece" data-poupe="" data-key="">β</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\gamma" data-type="greece" data-poupe="" data-key="">γ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\delta" data-type="greece" data-poupe="" data-key="">δ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\epsilon" data-type="greece" data-poupe="" data-key="">ε</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\zeta" data-type="greece" data-poupe="" data-key="">ζ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\eta" data-type="greece" data-poupe="" data-key="">η</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\theta" data-type="greece" data-poupe="" data-key="">θ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\iota" data-type="greece" data-poupe="" data-key="">ι</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\kappa" data-type="greece" data-poupe="" data-key="">κ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\lambda" data-type="greece" data-poupe="" data-key="">λ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mu" data-type="greece" data-poupe="" data-key="">μ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\nu" data-type="greece" data-poupe="" data-key="">ν</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\xi" data-type="greece" data-poupe="" data-key="">ξ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\omicron" data-type="greece" data-poupe="" data-key="">ο</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\pi" data-type="greece" data-poupe="" data-key="">π</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\rho" data-type="greece" data-poupe="" data-key="">ρ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\sigma" data-type="greece" data-poupe="" data-key="">σ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\tau" data-type="greece" data-poupe="" data-key="">τ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\upsilon" data-type="greece" data-poupe="" data-key="">υ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\varphi" data-type="greece" data-poupe="" data-key="">φ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\chi" data-type="greece" data-poupe="" data-key="">χ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\psi" data-type="greece" data-poupe="" data-key="">ψ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\omega" data-type="greece" data-poupe="" data-key="">ω</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\varepsilon" data-type="greece" data-poupe="" data-key="">ϵ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\vartheta" data-type="greece" data-poupe="" data-key="">ϑ
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\varpi" data-type="greece" data-poupe="" data-key="">ϖ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\varrho" data-type="greece" data-poupe="" data-key="">ϱ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\varsigma" data-type="greece" data-poupe="" data-key="">ς
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\phi" data-type="greece" data-poupe="" data-key="">ϕ</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 220px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Gamma" data-type="greece" data-poupe="" data-key="">Γ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Delta" data-type="greece" data-poupe="" data-key="">Δ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Theta" data-type="greece" data-poupe="" data-key="">Θ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Lambda" data-type="greece" data-poupe="" data-key="">Λ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Pi" data-type="greece" data-poupe="" data-key="">Π</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Sigma" data-type="greece" data-poupe="" data-key="">Σ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Phi" data-type="greece" data-poupe="" data-key="">Φ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Psi" data-type="greece" data-poupe="" data-key="">Ψ</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Omega" data-type="greece" data-poupe="" data-key="">Ω</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\Xi" data-type="greece" data-poupe="" data-key="">Ξ</div>
		</div>
		<!--<div class="equation-top-item-bg" style="opacity: 1; width: 556px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{A}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">A
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{B}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">B
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{C}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">C
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{D}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">D
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{E}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">E
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{F}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">F
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{G}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">G
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{H}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">H
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{I}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">I
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{J}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">J
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{K}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">K
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{L}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">L
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{M}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">M
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{N}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">N
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{O}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">O
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{P}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">P
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{Q}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">Q
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{R}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">R
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{S}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">S
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{T}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">T
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{U}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">U
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{V}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">V
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{W}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">W
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{X}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">X
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{Y}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">Y
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathbb{Z}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_AMS;">Z
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 556.828px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{A}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">A
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{B}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">B
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{C}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">C
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{D}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">D
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{E}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">E
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{F}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">F
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{G}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">G
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{H}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">H
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{I}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">I
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{J}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">J
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{K}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">K
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{L}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">L
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{M}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">M
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{N}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">N
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{O}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">O
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{P}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">P
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{Q}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">Q
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{R}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">R
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{S}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">S
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{T}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">T
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{U}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">U
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{V}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">V
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{W}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">W
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{X}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">X
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{Y}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">Y
			</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\mathcal{Z}" data-type="greece" data-poupe="" data-key=""
				 style="font-family: KaTeX_Caligraphic;">Z
			</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 556px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="a" data-type="greece" data-poupe="" data-key="">a</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="b" data-type="greece" data-poupe="" data-key="">b</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="c" data-type="greece" data-poupe="" data-key="">c</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="d" data-type="greece" data-poupe="" data-key="">d</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="e" data-type="greece" data-poupe="" data-key="">e</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="f" data-type="greece" data-poupe="" data-key="">f</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="g" data-type="greece" data-poupe="" data-key="">g</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="h" data-type="greece" data-poupe="" data-key="">h</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="i" data-type="greece" data-poupe="" data-key="">i</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="j" data-type="greece" data-poupe="" data-key="">j</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="k" data-type="greece" data-poupe="" data-key="">k</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="l" data-type="greece" data-poupe="" data-key="">l</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="m" data-type="greece" data-poupe="" data-key="">m</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="n" data-type="greece" data-poupe="" data-key="">n</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="o" data-type="greece" data-poupe="" data-key="">o</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="p" data-type="greece" data-poupe="" data-key="">p</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="q" data-type="greece" data-poupe="" data-key="">q</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="r" data-type="greece" data-poupe="" data-key="">r</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="s" data-type="greece" data-poupe="" data-key="">s</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="t" data-type="greece" data-poupe="" data-key="">t</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="u" data-type="greece" data-poupe="" data-key="">u</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="v" data-type="greece" data-poupe="" data-key="">v</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="w" data-type="greece" data-poupe="" data-key="">w</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="x" data-type="greece" data-poupe="" data-key="">x</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="y" data-type="greece" data-poupe="" data-key="">y</div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="z" data-type="greece" data-poupe="" data-key="">z</div>
		</div>-->
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	append: {
		type: Function,
		default: () => {}  // 默认空函数，避免报错
	}
});
const emit = defineEmits(['fomule']);
const selectItem = (event: MouseEvent) => {
	// 获取触发事件的元素
	const target = event.currentTarget as HTMLElement;
	// 读取 data-code 属性值
	const code = target.dataset.code;
	props.append(code);
	emit('fomule', code);
};
</script>
<style scoped lang="scss">

</style>
